<template>
  <div class="order-container">
    <div class="nav-bar" style="background: #FFFFFF">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#000000">我的订单</span>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="order-content-warp" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="switch-bar flex-row-space-between">
        <div class="switch-item flex-1" :class="{ 'active' : currentStatus === item.status}"
             v-for="item in statusList" :key="item.status" @click="switchStatus(item.status)">
          {{item.label}}
        </div>
      </div>
      <scroll-view scroll-y @scrolltolower="getNextList" class="order-list" v-if="orderList.length">
        <div class="clear-10"></div>
        <div class="order-item" v-for="order in orderList" :key="order.id" @click="goToOrderDetailPage(order)">
          <div class="order-top flex-row-space-between">
            <label class="status-text" :class="{'red' : order.status === 5}">
              {{order.status_name}}
            </label>
            <img src="/static/assets/img/icon-delete.png" class="icon-delete" @click.stop="deleteOrder(order.id)"/>
          </div>
          <block v-if="order.order_info_list">
            <div class="order-item-content flex-row" v-for="(item, dex) in order.order_info_list" :key="item.id">
              <img :src="item.cover_img_url" class="img"/>
              <div class="order-right flex-1 flex-col">
                <block>
                  <div class="flex-row">
                    <div class="flex-col-space-between flex-1 order-right-top">
                      <label class="content-title">{{item.goods_name}}</label>
                      <label class="desc">{{item.goods_spec_name}}</label>
                    </div>
                    <div class="flex-col align-end">
                      <label class="count">x{{item.amount}}</label>
                    </div>
                  </div>
                </block>
              </div>
            </div>
          </block>

          <div class="order-bottom">
            <div class="total-stat">
              共{{order.amount}}件商品 付款:
              <span class="price-text">￥{{order.charge / 100}}</span>
            </div>
            <div class="operation-row flex-row-v-center">
              <div class="btn flex-center red" v-if="order.status === 5" @click.stop="pay(order.sn)">继续支付</div>
              <div class="btn flex-center red" v-if="order.status === 10" @click.stop="remindDelivery(order.id)">提醒发货</div>
              <div class="btn flex-center red" v-if="order.status === 20" >查看物流</div>
              <div class="btn flex-center red" v-if="order.status === 20" @click.stop="orderSign(order.id)">确认收货</div>
              <div class="btn flex-center red" v-if="order.status === 30" @click.stop="goToAssessPage(order.id)">马上评价</div>
            </div>

          </div>
        </div>
      </scroll-view>
      <div class="empty-div flex-col-v-center" v-else>
        <img src="/static/assets/img/empty-ticket.png" class="empty-img"/>
        <label class="empty-text">暂无订单</label>
      </div>
    </div>
    <_toast/>
  </div>
</template>

<script>
  import global from 'global'
  import Core from 'core'
  import Common from 'common'
  import ZanToast from '@/components/zan/toast'
  import { getComponentByTag } from '../../utils/helper'

  export default {
    components: {
      _toast: ZanToast
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,

        statusList: [
          {
            label: '全部',
            status: 0
          },
          {
            label: '待付款',
            status: 5
          },
          {
            label: '待收货',
            status: 20
          },
          {
            label: '已收货',
            status: 30
          },
          {
            label: '已评价',
            status: 40
          }
        ],
        currentStatus: 0,
        page: 1,
        orderList: []
      }
    },

    mounted () {
      this.toast = getComponentByTag(this, '_toast')
    },

    onShow () {
      this.getOrderList()
    },

    methods: {
      onClickGoBack () {
        Core.Util.goBack()
      },

      switchStatus (status) {
        if (status === this.currentStatus) return
        this.currentStatus = status
        this.getOrderList()
        console.log(this.currentStatus)
      },

      getNextList () {
        let page = this.page
        if (page < 0) {
        } else {
          page += 1
          this.getOrderList(page)
        }
      },

      getOrderList (page = 1) {
        console.log(page)
        let oldList = page === 1 ? [] : this.orderList
        Core.Api.Order.orderList(page, this.currentStatus)
          .then(res => {
            console.log(res)
            let newList = res.order_list
            this.orderList = oldList.concat(newList)
            if (this.orderList.length === res.count) {
              this.page = -1
            } else {
              this.page = page
            }
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      remindDelivery (orderId) {
        Core.Api.Order.remindOrder(orderId)
          .then(res => {
            this.toast.showZanToast('提示成功')
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      orderSign (orderId) {
        let $this = this;
        wx.showModal({
          title: '提示',
          content: '确定收货？',
          success (res) {
            if (res.confirm) {
              Core.Api.Order.orderSign(orderId)
                .then(res => {
                  $this.getOrderList()
                })
                .catch(err => {
                  Core.Util.showTip('', err.message)
                })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },

      pay (sn) {
        Core.Api.Pay.payOrder(sn)
          .then(res => {
            if (res && res.wx_pay) {
              let wxPay = res.wx_pay;
              return Core.WeChat.requestPayment(
                wxPay.timeStamp,
                wxPay.nonceStr,
                wxPay.package,
                wxPay.signType,
                wxPay.paySign
              );
            }
          })
          .then(res => {
            if (res.errMsg && res.errMsg === 'requestPayment:ok') {
              wx.showModal({
                title: "",
                content: "订单支付成功",
                showCancel: false,
                success: function(res) {
                  if (res.confirm) {
                    Common.goRedirect('/pages/成功付款/main?order_sn=' + sn)
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                  }
                }
              });
            }
          })
      },

      goToAssessPage (orderId) {
        Common.go(`/pages/评价/main?order_id=${orderId}`)
      },

      goToOrderDetailPage (order) {
        Common.go(`/pages/订单详情/main?order_id=${order.id}`)
      },

      deleteOrder (orderId) {
        wx.showModal({
          title: '提示',
          content: '确定删除该订单吗？',
          success (res) {
            if (res.confirm) {
              Core.Api.Order.deleteOrder(orderId)
                .then(res => {
                  this.getOrderList()
                })
                .catch(err => {
                  Core.Util.showTip('', err.message)
                })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-container {
    background: #f9f9f9;
    height: 100%;

    .order-content-warp {
      .w-100 {
        width: 100%;
      }
      height: 100%;
      .switch-bar {
        height: 55px;
        background: #ffffff;
        .switch-item {
          position: relative;
          font-size: 16px;
          color: #3C3C3C;
          text-align: center;
          line-height: 55px;
          &.active {
            color: #313131;
            font-weight: 500;
            &:after {
              height: 3px;
              width: 36px;
              background: #0EC5A9;
              display: block;
              content: '';
              position: absolute;
              bottom: 10px;
              left: calc(50% - 18px);
            }
          }
        }
      }
      .order-list {
        box-sizing: border-box;
        height: calc(100% - 55px);
        .order-item {
          margin-bottom: 10px;
          background: white;
          padding: 15px;
          .order-top {
            border-bottom: 1px solid rgba(164, 160, 160, .3);
            padding: 5px 0;
            .icon-delete {
              width: 19px;
              height: 18px;
            }
            .status-text {
              font-size: 12px;
              &.red {
                color: #F15858;
              }
            }
          }
          .order-item-content {
            padding: 20px 14px 2px;
            border-bottom: 1px solid #f1f1f1;
            img {
              width: 88px;
              height: 88px;
              margin-right: 20px;
            }
            .order-right {
              height: 88px;
              .order-right-top {
                align-items: flex-start;
              }
              .content-title {
                margin-right: 6px;
                font-size: 15px;
                color: #313131;
              }
              .price {
                font-size: 15px;
                color: #ED2F35;
              }
              .count {
                font-size: 14px;
                color: #939393;
              }
              .desc {
                align-self: start;
                display: inline-block;
                margin-top: 6px;
                background: #F9F9F9;
                padding: 4px 8px;
                font-size: 12px;
              }
            }
          }
          .order-bottom {
            padding-top: 12px;
            .total-stat {
              width: 100%;
              text-align: right;
              color: #939393;
              font-size: 14px;
              margin-bottom: 6px;
              .price-text {
              }
            }

            .operation-row {
              justify-content: flex-end;
              .btn {
                border-radius: 15px;
                & + .btn {
                  margin-left: 23px;
                }
                border: 1px solid #959595;
                width: 80px;
                height: 30px;
                font-size: 12px;
                color: #5b5b5b;
                &.red {
                  border: 1px solid rgb(250, 77, 23);
                  color: rgb(250, 77, 23);
                }
                &.yellow {
                  border: 1px solid rgb(250, 149, 57);
                  color: rgb(250, 149, 57);
                }
              }
            }

          }
        }
      }
      .empty-div {
        margin-top: 30%;
        .empty-img {
          width: 167px;
          height: 138px;
          margin-bottom: 20px;
        }
        .empty-text {
          margin-bottom: 20px;
          color: #939393;
          font-size: 16px;
        }
      }

    }

    .bg-white {
      background: white;
    }
    .align-end {
      align-items: flex-end;
    }
    .align-start {
      align-items: flex-start;
    }
  }
</style>
